<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>颜色</title>
    <style>
        body {
            font-size: 14px;
        }
        section {
            margin: 60px;
            width: 360px;
        }

        .alias {
            color: red;
        }
        .rgb {
            color: rgb(255, 0, 0);
        }
        .rgba {
            color: rgba(255, 0, 0, 0.5);
        }
        .hex {
            color: #0e6ab8;
        }
        .currentColor {
            color: #0e6ab8;
            border: 1px solid currentColor;
        }

    </style>
</head>
<body>

<section>
<h2>别名</h2>
<pre class="alias">
.alias {
    color: red;
}
</pre>
</section>

<section>
<h2>rgb 和 rgba</h2>
<pre class="rgb">
.rgb {
    color: rgb(255, 0, 0);
}
</pre>
<pre class="rgba">
.rgba {
    color: rgba(255, 0, 0, 0.5);
}
</pre>
</section>

<section>
<h2>十六进制</h2>
<pre class="hex">
.hex {
    color: #0e6ab8;
}
</pre>
</section>

<section>
<h2>currentColor 和 transparent</h2>
<pre class="currentColor">
.currentColor {
    color: #0e6ab8;
    border: 1px solid currentColor;
}
// 演示下 transparent
</pre>
</section>

</body>
</html>